import { Card as SemiCard, ButtonGroup, Button, List as SemiList } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconDelete, IconEdit } from "@douyinfe/semi-icons";
import { useEffect } from "react";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import { Avatar, Card, message, Popconfirm, Row, Col, Tag, Space, Modal, Badge, List } from "antd";
import { UserOutlined, ArrowUpOutlined } from "@ant-design/icons";
import Jdenticon from "react-jdenticon";

import personFemale from "../assets/images/person_female.png";
import personMale from "../assets/images/person_male.png";

import useAllPositions from "../hooks/position/useAllPositions";
import useDeletePosition from "../hooks/position/useDeletePosition";
// import useInstitutionDeletePosition from "../hooks/institution/useDeletePosition";
import usePositionMembers from "../hooks/position/usePositionMembers";
import useUpdateStaffPosition from "../hooks/staff/useUpdateStaffPosition";

import useHelperPostion from "../helper/useHelperPostion";

// 职位, 职位
const PositionPage = () => {
    const { windowInnerHeight } = useModel("global");
    const { openAddPositionModal, openEditPositionModal } = useHelperPostion();

    const { loading, positions, loadPositions } = useAllPositions();
    const { deletePosition } = useDeletePosition();
    const { loading: memberLoading, loadPositionMembers, members } = usePositionMembers();
    // const { deleteInstitutionPosition } = useInstitutionDeletePosition();
    const { loading: updateLoading, updateStaffPosition } = useUpdateStaffPosition();

    const state = useReactive({
        submitLoading: false,
        selectPosition: null,
    });

    useEffect(() => {
        state.selectPosition?.opUuid && loadPositionMembers(state.selectPosition.opUuid);
    }, [state.selectPosition]);

    useEffect(() => {
        let selectPosition = positions.find((item) => item.opUuid === state.selectPosition?.opUuid);
        !selectPosition && positions?.length > 0 && (state.selectPosition = positions[0]);
    }, [positions]);

    const handleDeletePosition = async (item) => {
        Modal.confirm({
            title: "确认",
            content: `确认要删除该[${item.opName}]职位信息吗?`,
            okButtonProps: { loading: state.submitLoading },
            onOk: () => deletePosition(item.opUuid, loadPositions),
        });
    };

    const removePerson = async (record) => {
        state.submitLoading = true;
        // let res = await deleteInstitutionPosition(record.reUuid);
        // if (res) {
        //     message.success("成功移除机构人员");
        //     loadMembers();
        // }
        state.submitLoading = false;
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 48;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={5}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>职位列表</span>}
                    headerStyle={{ padding: "7px 12px" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconPlusCircle />} onClick={() => openAddPositionModal({ reloadData: loadPositions })}></Button>
                            <Button icon={<IconRefresh />} onClick={loadPositions}></Button>
                        </ButtonGroup>
                    }
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                >
                    <SemiList
                        loading={loading}
                        dataSource={positions}
                        renderItem={(item, index) => (
                            <SemiList.Item
                                key={index}
                                style={{ padding: "12px 12px 12px 24px" }}
                                className={`list-item ${state.selectPosition?.opUuid === item?.opUuid ? "list-item-selected" : ""}`}
                                main={
                                    <div>
                                        <div style={{ color: "var(--semi-color-text-0)", fontWeight: 600 }}>{item?.opName || "-"}</div>
                                        <div style={{ fontSize: 12 }}>{item?.opDesc}</div>
                                    </div>
                                }
                                onClick={() => (state.selectPosition = item)}
                                extra={
                                    <ButtonGroup className="bnts">
                                        <Button
                                            icon={<IconEdit />}
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                openEditPositionModal({ record: item, reloadData: loadPositions });
                                            }}
                                        />
                                        <Button
                                            icon={<IconDelete style={{ color: "#E91E63" }} />}
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                handleDeletePosition(item);
                                            }}
                                        />
                                    </ButtonGroup>
                                }
                            ></SemiList.Item>
                        )}
                    />
                </SemiCard>
            </Col>
            <Col span={19}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>人员列表</span>}
                    headerStyle={{ padding: "7px 12px" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh />} disabled={!state.selectPosition?.opUuid} onClick={() => loadPositionMembers(state.selectPosition.opUuid)}></Button>
                        </ButtonGroup>
                    }
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
                >
                    <List
                        loading={memberLoading}
                        grid={{ gutter: 36, lg: 3, xl: 4, xxl: 5 }}
                        dataSource={members}
                        style={{ padding: "10px 20px" }}
                        renderItem={(item) => {
                            let tags = [];
                            if (item.isBoss) tags.push(<Tag>BOSS</Tag>);
                            if (item.deInfo?.osName)
                                tags.push(
                                    <Tag>
                                        <Space size={2}>
                                            <ArrowUpOutlined />
                                            {item.deInfo?.osName}
                                        </Space>
                                    </Tag>
                                );
                            return (
                                <List.Item style={{ marginBottom: 10 }}>
                                    <Badge.Ribbon text={item.osRoge}>
                                        <Card
                                            size="small"
                                            hoverable
                                            style={{ width: "100%" }}
                                            actions={[
                                                <Popconfirm
                                                    title="确认要从机构中移除该人员吗?"
                                                    okButtonProps={{ loading: updateLoading }}
                                                    onConfirm={() =>
                                                        updateStaffPosition({ osUuid: item.osUuid, opUuid: null }, (res) => {
                                                            if (res) {
                                                                message.success("成功移除员工的职位信息");
                                                                loadPositionMembers(state.selectPosition.opUuid);
                                                            }
                                                        })
                                                    }
                                                >
                                                    移除
                                                </Popconfirm>,
                                            ]}
                                        >
                                            <Card.Meta
                                                avatar={
                                                    <Avatar
                                                        shape="square"
                                                        size={48}
                                                        src={item.osRoge === "男" ? personMale : personFemale}
                                                        style={{ color: "#000", backgroundColor: "#eee" }}
                                                    />
                                                }
                                                title={item.osName}
                                                description={<Space>{tags}</Space>}
                                            />
                                        </Card>
                                    </Badge.Ribbon>
                                </List.Item>
                            );
                        }}
                    />
                </SemiCard>
            </Col>
        </Row>
    );
};

export default PositionPage;
